<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>移动div</title>
	<style type="text/css">
	*{padding:0px; margin:0px;}
	#one{width:100px; height:100px;background :pink;
		position:absolute;
		}
	</style>
</head>
<body>
	<div id ='one'></div>
	<script type="text/javascript">
	//获取元素
	var move= document.getElementById('one');

	// /设置全局变量

	var x =0;
	var y =0;
	var l =0;
	var t =0;


	//设置变量
	var isDown = false;

	//绑定鼠标按下的事件
	move.onmousedown =function(e)
	{
		//获取x y 的坐标
		x = e.clientX;
		y =e.clientY;

		// 获取 元素的左和顶偏移量
		l = move.offsetLeft;
		t =move.offsetTop;

		//打开	
		isDown =true;

		// 设置样式
		move.style.cursor ='move';

	}
	//绑定鼠标移动的事件
	window.onmousemove =function(e)
	{
		if(isDown == false){
			return;
		}

		//获取x 和y的
		var nx = e.clientX;
		var ny = e.clientY;

		//重新计算左偏移量和顶部偏移量

		var nl = nx - (x-l);
		var nt = ny - (y-t);

		move.style.left = nl +'px';
		move.style.top = nt+ 'px';
	}
	


	//绑定鼠标抬起的事件
	move.onmouseup = function()
	{
		isDown =false;
		move.style.cursor = 'default';
	}

	</script>
</body>
</html>